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Description 

Method and system for displaying comic 
books and graphic novels on all sizes of 
electronic display screens. 

Background of Invention 

[0001] This invention relates generally to the field of comic book 
and graphic novel publishing and more specifically to a 
method and system for displaying comic books, and 
graphic novels on all sizes of electronic display screens. 

[0002] Comic books and graphic novels relate a narrative through 
a combination of text and art. Each page is typically made 
up of one or more panels, e.g., images. Each panel typi- 
cally contains one or more text balloons, which relate the 
story. Typical electronic display screens have a much 
lower display resolution than paper printers, often by a 
factor of three or more. Consequently, displaying a page 
from a comic book on an electronic display screen re- 
duces the visual quality and text legibility of the panels. 
This problem is exacerbated by the proliferation of mobile 



computing devices with very small display screens, such 
as the screen on a handheld computer, or mobile phone. 
[0003] over the past several years, a few attempts have been 
made at displaying comic books and graphic novels via 
electronic display screens. The solutions have ranged 
from simple to complex. The most commonly used and 
simplest solution is to use an image scanner to scan the 
pages of a comic book, and then display those scanned 
images on a screen, one or two pages at a time. As men- 
tioned above, this solution suffers from the fact that typi- 
cal electronic display screens have far less resolution than 
paper printers. Hence, the visual quality of the images 
suffer, and the text balloons become illegible when dis- 
played on small screens. More complex solutions have 
been created by the comic book companies CrossGen and 
Marvel Entertainment. CrossGen uses a computer system 
that displays two comic book pages at a time, scaled to fit 
a display area on screen. The text balloons are layered on 
top of the panels and are magnified when the user hovers 
a mouse pointer over them. Marvel's system also displays 
two pages, but, instead of magnifying just the text bal- 
loons, Marvel's system magnifies several panels at a time. 
While both of these solutions are better than the simple 



solution mentioned above, they each contain the same fa- 
tal flaw. The flaw is that each system treats the text bal- 
loons as images. Because the text balloons are images, 
when the display area is reduced, the text quickly be- 
comes illegible. 

[0004] No p r j or ar t has been able to successfully maximize the 
visual quality and preserve the text legibility of a comic 
book across all sizes of electronic display screens. This is 
because prior art attempts to render more than one panel 
on screen at a time, and/or displays text balloons as im- 
ages, which become illegible as they shrink to fit small 
display screens. Given the amount of time that previous 
implementers have thought about and worked on prior art 
solutions, it can be inferred that this present invention has 
not been an obvious solution. 

[0005] An object of the invention is to maximize the visual qual- 
ity of comic books and graphic novels displayed on elec- 
tronic display screens by using the maximum available 
screen area to display one panel at a time. 

[0006] An additional object of the invention is to maximize the 
legibility of comic books and graphic novels displayed on 
electronic display screens by generating and sizing the 
text balloons based on the text of the balloon and a font 



type and size selected from a group of font types and 
sizes that are legible for the size of the display area on 
which the panel and balloons are drawn. 
[0007] a further object of the invention is to provide a way for 

the user to toggle the visibility of the text balloons so that 
the panel underneath them can be seen in totality at any- 
time. 

[0008] An advantage of this invention is that it provides a way for 
comic books and graphic novels to be read on just about 
any electronic display screen from high-definition televi- 
sions to desktop PCs to handheld computers to mobile 

phones. 
Summary of Invention 

[0009] a method and system for displaying comic books and 

graphic novels on all sizes of electronic display screens is 
provided. One embodiment of the present invention exe- 
cutes as a viewer program on a computer system. The 
viewer program displays one panel, e.g. image, at a time, 
on screen. The text balloons for the panel are generated 
and sized based on the text of the balloon and a font type 
and size selected from a group of font types and sizes 
that are legible for the size of the display area on which 
the panel and balloons are drawn. The user may also 



choose to toggle the balloon visibility, allowing the panel 

underneath the balloons to be visible at any time. 
Brief Description of Drawings 

[0010] The drawings constitute a part of this specification and 

include exemplary embodiments to the invention, which 

may be embodied in various forms. 
[0011] Figure 1 illustrates a handheld computer with one panel 

and a text balloon shown on its display screen. 
[0012] Figure 2 illustrates a handheld computer with one panel 

and a text balloon shown on its display screen, the text 

balloon is drawn with a different font. 
[0013] Figure 3 illustrates a handheld computer with one panel 

shown on its display screen, the text balloon's visibility 

has been set to false. 

[0014] Figure 4 is a flow chart of operations that comprise the 

method. 
Detailed Description 

[0015] a method and system for displaying comic books and 

graphic novels on all sizes of electronic display screens is 
provided. In one embodiment, the present invention exe- 
cutes as a viewer program on a computer system. A flow 
chart and detailed description of the operations, as exe- 



cuted by the viewer program are given, allowing anyone 
with ordinary skill in the art of writing graphic oriented 
computer programs to implement this invention on a wide 
variety of computer devices with varying display screen 
sizes. It will be apparent, however, to one skilled in the art 
of writing graphic oriented computer programs, that the 
present invention may be implemented without these spe- 
cific operations, or, may be implemented with the opera- 
tions in a different order. This description is intended to 
illustrate the present invention and is not intended to limit 
the scope of the invention to the description of the opera- 
tions, number of operations, or the order of the opera- 
tions. 

[0016] Figure 1 illustrates the method as shown on a handheld 

computer. One panel is scaled to fit the display 10, and a 
text balloon generated and sized based on the text of the 
balloon and a font type and size selected from a group of 
font types and sizes that are legible for the size of the 
display area on which the panel and balloons are drawn 
11. 

[0017] Figure 2 shows the said handheld computer, and said 

panel, this time with the text balloon re-generated and 
sized with a different font type and size selected from a 



group of font types and sizes that are legible for the size 
of the display area on which the panel and balloons are 
drawn 20. 

[0018] Figure 3 shows the said handheld computer, and said 

panel, this time with the text balloon visibility toggled to 
false. Note that said panel can now be seen in its totality. 

[0019] Figure 4 is a flow chart of operations that comprise the 

method. Detailed descriptions of each operation are listed 
below. 

[0020] 40 The width and height of the on screen display area 
dedicated to the viewer program, hereafter referred to 
simply as, the display area, are determined. 

[0021] 41 The font type and font size are selected from a group 
consisting of font types and font sizes that are legible for 
the determined display area size. One way to implement 
this feature is to use a data structure that maps a range of 
display area sizes to known legible fonts for the range of 
sizes. 

[0022] 42 The panel, e.g., image number is set to 1, the balloon 
number is set to 0, the display balloon flag is set to true. 

[0023] 43 using the current panel number as identification, the 
following information is retrieved from data storage, the 
width and height of the image, and the number of bal- 



loons the panel has. 

[0024] 44 The size of the panel is compared to the size of the 
display area to see if it is larger. 

[0025] 45 The panel is scaled to fit the display area. To preserve 
the aspect ratio of the panel, the amount of scaling is de- 
termined for each dimension of the panel, both width and 
height. The dimension that must scale the most is used to 
determine the amount of scaling applied to both dimen- 
sions. For example, if it is determined that the width must 
shrink by 70% to fit the new width and the height must 
shrink by 50% to fit the new height. The width and height 
are shrunk by 70% to ensure that the panel will fit the dis- 
play area with no visual distortion. 

[0026] 4£ a determination is made if the panel has more than 1 
balloon and if the current balloon number is greater than 
0. 

[0027] 47 Using the current balloon number as identification, the 
following balloon information is retrieved from data stor- 
age: the balloon tail origin point, the balloon tail type, the 
tail length x value, the tail length y value, and the text of 
the balloon. 

[0028] 4#The balloon maximum width and height are deter- 
mined. The balloon tail type can be one of nine possible 



values. The values are noted as directions: "North", "North- 
east", "East", "Southeast", "South", "Southwest", "West", 
"Northwest" and the special case value of "None", meaning 
the balloon does not have a tail. 

[0029] |f the balloon tail type is "North", the maximum height of 
the balloon is calculated by subtracting the display area 
height from the y coordinate value of the balloon tail ori- 
gin after it has been translated to the south by the tail 
length y value. The maximum width of the balloon is set 
to the width of the display area. 

[0030] |f the balloon type is "Northeast", the maximum height is 
calculated like the "North" balloon type, and the maximum 
balloon width is calculated by subtracting the x coordinate 
of the balloon tail origin point after it has been translated 
to the west by the tail length x value. 

[0031] if the balloon tail type is "East", the maximum balloon 

width is calculated by subtracting the x coordinate of the 
balloon tail origin point after it has been translated to the 
west by the tail length x value. The maximum height of 
the balloon is set to the height of the display area. 

[0032] if the balloon type is "Southeast", the maximum width is 
calculated like the "East" balloon type, and the maximum 
balloon height is equal to the y coordinate of the balloon 



tail origin point after it has been translated to the north by 
the tail length y value. 

[0033] if the balloon type is "South", the maximum height is 

equal to the y coordinate of the balloon tail origin point 
after it has been translated to the north by the tail length 
y value. The maximum balloon width is equal to the width 
of the display area. 

[0034] if the balloon type is "Southwest", the maximum height is 
calculated like the "South" balloon type, and the maximum 
balloon width is equal to the width of the display area 
subtracted by the x coordinate of the balloon tail origin 
point after it has been translated to the east by the tail 
length x value. 

[0035] if the balloon type is "West", the maximum balloon width 
is equal to the width of the display area subtracted by the 
x coordinate of the balloon tail origin point after it has 
been translated to the east by the tail length x value. The 
maximum balloon height is equal to the height of the dis- 
play area. 

[0036] |f the balloon type is "Northwest", the maximum height is 
calculated like the "North" balloon type, and the maximum 
balloon width is calculated like the "West" balloon type. 

[0037] |f the balloon type is "None", the maximum balloon width 



is calculated by subtracting the display area width from 
the x coordinate of the balloon tail origin point, and the 
maximum height is calculated by subtracting the display 
area height from the y coordinate of the balloon tail origin 
point. 

[0038] 49 The actual balloon width, height and origin point are 
determined. Using the metrics from the currently selected 
font, which indicate the width and height of each charac- 
ter in the font, the width of the balloon text is calculated. 
If the width of the balloon text exceeds the maximum bal- 
loon width, the actual balloon width is set to the maxi- 
mum balloon width; otherwise the actual balloon width is 
recorded as the width of the balloon text. To determine 
the actual balloon height, using metrics from the currently 
selected font, the balloon text is divided into groups of 
text lines each of which fits into the actual balloon width. 
New text lines are created, on inter-word boundary char- 
acters such as spaces or hyphens. When the height of the 
text lines exceeds the maximum height of the balloon, a 
new text line group is created and the remaining balloon 
text is again divided into lines that fit into the actual bal- 
loon width. This process continues until enough text line 
groups have been created to store all lines of the balloon 



text. If the lines of text never exceed the maximum bal- 
loon height, only one text line group is created and the 
actual balloon height is set to the height of the lines in 
this group. The current text line group number is set to 0. 

[0039] The balloon origin point is determined by the balloon type 
and actual balloon width and height. If the balloon type is 
"North" and the actual balloon width is less than the max- 
imum balloon width, the balloon origin x coordinate is 
determined by subtracting from the balloon tail origin x 
coordinate the actual balloon width divided by 2; other- 
wise the balloon origin x coordinate is set to 0. The bal- 
loon origin y coordinate is equal to the balloon tail origin 
y coordinate translated south by the tail length y value. 

[0040] if the balloon type is "Northeast" and the actual balloon 
width is less than the maximum balloon width, the bal- 
loon origin x coordinate is determined by subtracting 
from the balloon tail origin x coordinate the tail length x 
value and then the actual balloon width; otherwise the 
balloon origin x coordinate is set to 0. The balloon origin 
y coordinate is equal to the balloon tail origin y coordinate 
translated south by the tail length y value. 

[0041] |f t he balloon type is "East" and the actual balloon height 
is less than the maximum balloon height, the balloon ori- 



gin y coordinate is determined by subtracting from the 
balloon tail origin y coordinate the actual balloon height 
divided by 2; otherwise the balloon origin y coordinate is 
set to 0. If the actual balloon width is less than the maxi- 
mum balloon width, the balloon origin x coordinate is de- 
termined by subtracting from the balloon tail origin x co- 
ordinate the tail x length and then the actual balloon 
width divided by 2; otherwise the balloon origin x coordi- 
nate is set to 0. 

[0042] if the balloon type is "Southeast" and the actual balloon 
width is less than the maximum balloon width, the bal- 
loon origin x coordinate is determined by subtracting 
from the balloon tail origin x coordinate the tail length x 
value and then the actual balloon width; otherwise the 
balloon origin x coordinate is set to 0. If the actual bal- 
loon height is less than the maximum balloon height, the 
balloon origin y coordinate is determined by subtracting 
from the balloon tail origin y coordinate the tail length y 
value and then the actual balloon height; otherwise the 
balloon origin y coordinate is set to 0. 

[0043] if the balloon type is "South" and the actual balloon width 
is less than the maximum balloon width, the balloon ori- 
gin x coordinate is determined by subtracting from the 



balloon tail origin x coordinate the actual balloon width 
divided by 2; otherwise the balloon origin x coordinate is 
set to 0. If the actual balloon height is less than the maxi- 
mum balloon height, the balloon origin y coordinate is 
determined by subtracting from the balloon tail origin y 
coordinate the tail length y value and then the actual bal- 
loon height; otherwise the balloon origin y coordinate is 
set to 0. 

[0044] if the balloon type is "Southwest", the balloon origin x co- 
ordinate is equal to the balloon tail origin x coordinate 
plus the tail length x value. If the actual balloon height is 
less than the maximum balloon height, the balloon origin 
y coordinate is determined by subtracting from the bal- 
loon tail origin y coordinate the tail length y value and 
then the actual balloon height; otherwise the balloon ori- 
gin y coordinate is set to 0. 

[0045] if the balloon type is "West", the balloon origin x coordi- 
nate is equal to the balloon tail origin x coordinate plus 
the tail length x value. If the actual balloon height is less 
than the maximum balloon height, the balloon origin y 
coordinate is determined by subtracting from the balloon 
tail origin y coordinate the tail length y value and then the 
actual balloon height divided by 2; otherwise the balloon 



origin y coordinate is set to 0. 

[0046] |f the balloon type is "Northwest", the balloon origin x co- 
ordinate is equal to the balloon tail origin x coordinate 
plus the tail length x value. The balloon origin y coordi- 
nate is equal to the balloon tail origin y coordinate plus 
the tail length y value. 

[0047] if the balloon type is "None", the balloon origin x coordi- 
nate is equal to the balloon tail origin x coordinate. The 
balloon origin y coordinate is equal to the balloon tail ori- 
gin y coordinate. 

[0048] 50 The panel is shown in the display area on screen. 

[0049] 5j a determination is made if the display balloon flag is 
set to true or not. 

[0050] 52 The balloon is drawn on top of the panel in the display 
area on screen. The balloon origin point, balloon tail type, 
tail length and balloon width and height are used to ac- 
complish the drawing of the balloon shape. 

[0051] 53 The current text line group number is used to retrieve 
the text lines from data storage that will be displayed in 
the balloon. The text is drawn on top of the balloon 
shape. 

[0052] 54 wait for new input from the user. 



[0053] 55 A determination is made whether or not the user in- 
putted the "Toggle Balloon" command. 

[0054] 56 Toggle the display balloon flag, if the display balloon 

flag is set to true, it is changed to false, if the flag is set to 
false, it is set to true. 

[0055] 57 a determination is made whether or not the user in- 
putted the "Next" command. 

[0056] 5£The current text line group number is incremented. 

[0057] 59 a determination is made to see if the current text line 
group number is greater than or equal to the total number 
of text line groups. 

[0058] 6Q The current balloon number is incremented. 

[0059] qi a determination is made to see if the current balloon 
number is greater than the total number of balloons for 
the current panel. 

[0060] 62 The current panel number is incremented and the cur- 
rent balloon number is set to 0. 

[0061] 63 A determination is made to see if the current panel 

number is greater than the total number of panels for this 
comic or graphic novel. 

[0062] 64 The current panel number is set to the total number of 
panels. A message "At end of comic." Message is dis- 



played. 

[0063] 65 a determination is made whether or not the user in- 
putted the "Previous" command. 
[0064] The current text line group number is decremented. 

[0065] 67 A determination is made to see if the current text line 

group number is less than 0. 
[0066] 68 The current balloon number is decremented. 

[0067] 69 A determination is made to see if the current balloon 

number is equal to 0. 
[0068] 70 The current panel number is decremented. 

[0069] ji a determination is made to see if the current image 
number is equal to 0. 

[0070] 72 The current panel number is set to 1. A message "At 
start of comic." is displayed. 

[0071] 73 a determination is made whether or not the user has 
selected a new font from a group consisting of legible 
fonts for the given display area size. 

[0072] 74 a determination is made whether or not the user has 
changed the size of the display area for the viewer pro- 
gram on screen. 

[0073] Accordingly, upon implementation of the operations illus- 
trated in Figure 4 and described within this document, the 



visual quality of each panel of a comic book or graphic 
novel will be maximized by devoting the maximum avail- 
able screen area to the panel at a time. Furthermore the 
invention has additional advantages in that: 

[0074] | t maximizes the legibility of the balloon text by generat- 
ing and sizing the text balloons based on the text of the 
balloon and a font type and size selected from a group of 
font types and sizes that are legible for the size of the 
display area on which the panel and balloons are drawn. 

[0075] it provides a way for the user to toggle the visibility of the 
text balloons so that the panel underneath them can be 
seen in totality at anytime. 

[0076] it is the first successful solution that allows comic books 
and graphic novels to be read on all sizes of electronic 
display screens including the screens of desktop PCs, 
handheld computers and mobile phones. 

[0077] while the present invention has been described with ref- 
erence to a particular embodiment, it is understood that 
the disclosure has been made for purpose of illustrating 
the invention by way of example and is not intended to 
limit the scope of the attached claims. It is understood 
that operations may be arranged in different ways and 
that equivalent operations can be substituted for those 



described here. These changes and substitutions are not 
intended to depart from the scope and the spirit of the 
present invention. 



